import { Button, Space, Layout, Modal, Switch, message } from 'myselfantd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import React, { useState, useCallback, useMemo, useRef, useImperativeHandle } from 'react';
import ElectronAdd from './ElectronAdd';
import ElectronEdit from './ElectronEdit';
import { getAlarmElectronicFencePage, updateAlarmElectronicFenceStatus } from '../api';
import type { getAlarmElectronicFencePageParams } from '../api';
interface DataType {
  code: string;
  name: string;
  type: number;
  machineNames: string;
  time: string;
  status: number;
  remark: string;
}
interface Props {
  reload: number;
  title?: string;
  stateChange?: Function;
  pageRef?: any;
}
const App = ({ reload: tableReload, pageRef }: Props) => {
  const [showDialog, setVisible] = useState<any>([false, '', '']);
  const ref = useRef<any>();
  useImperativeHandle(pageRef, () => {
    return {
      handleAdd: () => setVisible([true, 'add', ''])
    };
  });
  return (
    <>
      <Layout.PageContent
        pageContentRef={ref}
        search={false}
        table={useMemo(
          () => ({
            template: [
              {
                title: ' 序号 ',
                dataIndex: 'index',
                render: (text, record, index) => `${index + 1}`,
                width: 80
              },
              {
                title: '围栏名称',
                dataIndex: 'name',
                key: 'name',
                width: 160,
                showSorterTooltip: false
              },
              {
                title: '报警类型',
                dataIndex: 'type',
                key: 'type',
                showSorterTooltip: false,
                width: 120,
                render: (_, record) => {
                  enum Type {
                    '进入报警',
                    '退出报警'
                  }
                  return <Space size="middle">{Type[_]}</Space>;
                }
              },
              {
                title: '约束农机',
                dataIndex: 'machineNames',
                key: 'machineNames',
                showSorterTooltip: false,
                width: 150
              },
              {
                title: '约束时间',
                showSorterTooltip: false,
                key: 'time',
                render: (_, record) => (
                  <Space size="middle">
                    {_.constraintsTimeStart + ' - ' + _.constraintsTimeEnd}
                  </Space>
                )
              },
              {
                title: '状态',
                dataIndex: 'status',
                showSorterTooltip: false,
                key: 'status',
                width: 100,
                render: (_, record: any) => {
                  return (
                    <Switch
                      defaultChecked={_}
                      onChange={async (status) => {
                        let res = await updateAlarmElectronicFenceStatus({
                          status: +status,
                          id: record.id
                        });
                        if (res) {
                          message.success('状态更新成功');
                          ref.current?.handleSearch();
                        }
                      }}
                    />
                  );
                }
              },
              {
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                showSorterTooltip: false,
                width: 250
              },
              {
                title: '操作',
                width: 150,
                key: 'action',
                render: (_, record) => (
                  <Space size="middle">
                    <Button
                      type="link"
                      block
                      onClick={() => {
                        setVisible([true, 'edit', _]);
                      }}>
                      编辑
                    </Button>
                  </Space>
                )
              }
            ] as ColumnsType<DataType>,
            data: {
              data: [] as ColumnsType<DataType>,
              page: { total: 0, pageSize: 10, current: 1 }
            }
          }),
          []
        )}
        // request={useCallback(async (page: any, params: any) => {
        //   let defaultParams: getAlarmElectronicFencePageParams = {
        //     pageIndex: page.current,
        //     pageSize: page.pageSize
        //   };
        //   let {
        //     result: { data, pageIndex, pageSize: newPageSize, total },
        //   } = await getAlarmElectronicFencePage({ ...defaultParams, ...params });
        //   return {
        //     data,
        //     page: { total, pageSize: newPageSize, current: pageIndex }
        //   };
        // }, [])}
      />
      {showDialog[1] === 'add' && (
        <Modal.Dialog
          showDialog={showDialog[0]}
          changeDialog={(state: boolean) => setVisible([state, '', ''])}
          size="big"
          gray={true}>
          <ElectronAdd
            onFinish={() => {
              setVisible([false, '', '']);
              ref.current?.handleSearch();
            }}
          />
        </Modal.Dialog>
      )}
      {showDialog[1] === 'edit' && (
        <Modal.Dialog
          showDialog={showDialog[0]}
          changeDialog={(state: boolean) => setVisible([state, '', ''])}
          size="big"
          gray={true}>
          <ElectronEdit
            data={showDialog[2]}
            onFinish={() => {
              ref.current?.handleSearch();
              setVisible([false, '', '']);
            }}
          />
        </Modal.Dialog>
      )}
    </>
  );
};

export default App;
